<template>
  <div class="margin-top">
    <div class="panel-container">
      <div class="panel-content content-view">
        <div class="panel-title">数据概况</div>
        <div class="panel-line">
          <div class="panel-item" @click="handleViewClick('')">
            <div class="text-box">
              <div class="text-name">总量</div>
              <div class="text-num">{{ viewData.total || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-s-order"></i>
            </div>
          </div>
          <div class="panel-item logo-orange" @click="handleViewClick('apply')">
            <div class="text-box">
              <div class="text-name">待申领</div>
              <div class="text-num">{{ viewData.wait_accept || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-chat-square"></i>
            </div>
          </div>
          <div class="panel-item logo-blue" @click="handleViewClick(2)">
            <div class="text-box">
              <div class="text-name">待审核</div>
              <div class="text-num">{{ viewData.power || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-guide"></i>
            </div>
          </div>
          <div class="panel-item warning" @click="handleViewClick(3)">
            <div class="text-box">
              <div class="text-name">已发布</div>
              <div class="text-num">{{ viewData.pub || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-document-checked"></i>
            </div>
          </div>
          <div class="panel-item danger" @click="handleViewClick(4)">
            <div class="text-box">
              <div class="text-name">已删除</div>
              <div class="text-num">{{ viewData.delete || 0 }}</div>
            </div>
            <div class="icon-box">
              <i class="icon el-icon-delete"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-container">
      <div class="panel-content content-2">
        <el-row :gutter="30">
          <el-col :span="13">
            <div class="panel-line space-between">
              <div class="panel-title">员工工作情况</div>
              <el-button type="text" style="padding: 0" @click="$emit('showDialog', 'job')">查看更多>></el-button>
            </div>
            <div class="table-box">
              <el-table stripe :data="workInfo" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table1" style="width: 100%">
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="user_name" label="姓名"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="1" label="采集申领"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="2" label="采集发布"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="3" label="采集删除"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="5" label="用户发布申领"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="4" label="员工发布"> </af-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="panel-line space-between">
              <div class="panel-title">AI采集(不含自动发)</div>
              <el-button type="text" style="padding: 0" @click="$emit('showDialog', 'AI')">查看更多>></el-button>
            </div>
            <div class="table-box">
              <el-table stripe :data="spiderInfo" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table2" style="width: 100%">
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="date" label="采集日期"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="total" label="处理量"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="3" label="发布"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="4" label="删除"> </af-table-column>
                <af-table-column align="center" header-align="center" show-overflow-tooltip prop="percent" label="有效占比"> </af-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { apiAssetsCount1 } from '@/api/assetsPublic'

export default {
  name: 'Panel1',
  props: {
    time: Object,
  },
  data() {
    return {
      viewData: {},
      workInfo: [],
      spiderInfo: [],
    }
  },
  watch: {
    time: function () {
      this.getData()
    },
  },
  activated() {
    this.$refs.table1.doLayout()
    this.$refs.table2.doLayout()
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      apiAssetsCount1(this.time).then((res) => {
        const { view_data, work_info, spider_info } = res
        this.viewData = view_data
        this.workInfo = work_info
        this.spiderInfo = spider_info
        this.$refs.table1.doLayout()
        this.$refs.table2.doLayout()
      })
    },
    handleViewClick(param) {
      // 强制刷新路由
      this.$store.dispatch('permission/routeAuthorization', 'AssetManagement').then((res) => {
        const { start_time, end_time } = this.time
        this.$bus.$emit('forceUpdate', 'AssetManagement')
        if (param === 'apply') {
          this.$router.push({
            path: '/assetsPublic/assetManagement',
            query: { apply: true, start_time, end_time },
          })
        } else {
          this.$router.push({
            path: '/assetsPublic/assetManagement',
            query: { tab: param, start_time, end_time },
          })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}

.margin-top {
  margin-top: 62px;
}
</style>
